<template>
	<view class="bg col-center-horizotal">
		<image class="logo" src="/static/images/my.png">
		</image>
		<image src="/static/images/title.png" class="title"></image>
		<input placeholder-class="hint" class="input" placeholder="请输入您的手机号或账号" style="margin-top: 120rpx;" v-model="phone"  maxlength="11"/>
		<input placeholder-class="hint" class="input" placeholder="请输入密码" style="margin-top: 40rpx;" v-model="password" password/>
		<view class="btn row-center" @click="login()">
			登录
		</view>
		<view class="row-between" style="width: 100%;margin-top: 60rpx;">
			<view class="forget" @click="goForget">
				忘记密码
			</view>
			<view class="forget" @click="goRegiste">
				注册账号
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				password:''
			}
		},
		methods: {
			goForget(){
				uni.navigateTo({
					url:'/src/pages/other/forget'
				})
			},
			goRegiste(){
				uni.navigateTo({
					url:'/src/pages/other/registe'
				})
			},
			goHome(){
				uni.switchTab({
					url:'/src/pages/index/index'
				})
			},
			async login() {
				if(!this.phone || this.phone.length!=11){
					uni.showToast({
						title:'请输入正确手机号',
						icon:'none'
					})
					return
				}
				if(!this.password ){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return
				}
				var res = await this.$req({
					url:'api/customers/password_login',
					data:{
						phone:this.phone,
						password:this.password,
					}
				})
				if(res.code == 1) {
					uni.showToast({
						title:'登录成功',
						icon:'none'
					})
					uni.setStorageSync('token',res.data.token)
					uni.setStorageSync('phone',this.phone)
					setTimeout(()=>{
						uni.switchTab({
							url:'/src/pages/index/index'
						})
					},500)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
		}
	}
</script>
<style>
	page{
		width: 100vw;
		height: 100vh;
		background: linear-gradient( 180deg, #FFB6C1 0%, #FCE5E5 100%);
	}
</style>
<style lang="scss" scoped>
	.bg{
		padding: 80rpx;
	}
	.logo{
		margin-top: 136rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	.title{
		margin-top: 40rpx;
		width: 332rpx;
		height: 64rpx;
	}
	.input{
		padding-left: 30rpx;
		width: 100%;
		height: 108rpx;
		background: #FFEFF3;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.2);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FDA2BC;
	}
	.hint{
		font-weight: 400;
		font-size: 32rpx;
		color: #C48396;
		line-height: 48rpx;
	}
	.btn{
		margin-top: 60rpx;
		width: 100%;
		height: 108rpx;
		background: linear-gradient( 270deg, #FF5382 0%, #FF64AB 100%);
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.25);
		border-radius: 16rpx ;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		.btn-text{
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 48rpx;
		}
	}
	.forget{
		width: 112rpx;
		height: 44rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #BF788D;
		line-height: 44rpx;
	}
</style>
